<template>
    <div class="ads-dt-click-chartBox">
        <div id="ads-dt-click-charts"></div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import * as echarts from 'echarts';

export default {
    components:{
       
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        onMounted(()=>{
            createChart()
        })

        const createChart = ()=>{
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('ads-dt-click-charts'));
            // 绘制图表
            myChart.setOption({
                tooltip: {},
                // legend: {
                //     bottom:0,
                //     textStyle:{color:'#fff'},
                //     data: ['UV', 'PV']
                // },
                xAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff',fontSize:'8px'},
                    },
                    data: ['06:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
                },
                yAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff',fontSize:'8px'},
                    },
                    type:'value',
                    splitLine: {
                        show: true,
                        lineStyle:{
                            type:'dashed',
                            color:'#4C6FA2'
                        }
                    } 
                },
                series: [
                    {
                        name: 'UV',
                        type: 'line',
                        data: [5, 20, 36, 10, 14, 20,9, 39, 11, 5, 8, 16]
                    },
                    // {
                    //     name: 'PV',
                    //     type: 'line',
                    //     data: [12, 22, 4, 8, 10, 23,6, 11, 19, 22, 14, 10]
                    // }
                ]
            });
        }

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .ads-dt-click-chartBox{
        display: flex;
        width: 100%;
        height: 400px;
        flex-flow: column;
        font-family: Inter-Semi Bold, Inter;
        font-weight: normal;
        line-height: normal;
        #ads-dt-click-charts{
            flex: 1;
            margin: -90px 0 0 0;
        }
    }
</style>